<template>
  <div class="app-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>药库</el-breadcrumb-item>
      <el-breadcrumb-item>盘点管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未审核" name="first" style="margin-top: -40px">




        <el-card>

          <!-- 查询条件开始 -->
          <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
<!--            <el-form-item label="供应商名称" prop="providerId" >-->
<!--              <el-select-->
<!--                  placeholder="请选择厂商"-->
<!--                  v-model="queryParams.supplierId">-->

<!--                <el-option-->
<!--                    v-for="provider in providerOptions"-->
<!--                    :key="provider.supplierId"-->
<!--                    :label="provider.supplierName"-->
<!--                    :value="provider.supplierId"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="申请人" prop="procurementName">-->
<!--              <el-input v-model="queryParams.procurementName"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="采购编号" prop="procurementId">-->
<!--              <el-input v-model="queryParams.procurementId"></el-input>-->
<!--            </el-form-item>-->

<!--            <el-form-item>-->
<!--              <el-button type="primary" icon="el-icon-search" size="mini" @click="initDate">搜索</el-button>-->
<!--              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--            </el-form-item>-->
          </el-form>
          <!-- 查询条件结束 -->

          <!-- 表格工具按钮开始 -->
          <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="updateById(1)">通过</el-button>
            </el-col>

            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-edi" size="mini" :disabled="single" @click="updateById(2)">作废</el-button>
            </el-col>
          </el-row>
          <!-- 表格工具按钮结束 -->

          <!-- 数据表格开始 -->
          <el-table
              :data="pan.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              @selection-change="selectionLineChangeHandle">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="盘点编号" align="center" width="200" prop="checkId">

              <template #default="scope">
                <router-link :to="{path: '/panDetails',query:{key:scope.row.checkId,value:JSON.stringify(scope.row)}}">
                  {{scope.row.checkId}}
                </router-link>
              </template>
            </el-table-column>


            <el-table-column label="差异数量" prop="checkKnum"/>
            <el-table-column label="申请人" align="center" prop="checkUser"/>
            <el-table-column label="备注" prop="checkNote"/>
            <el-table-column label="创建时间" align="center" prop="checkDate"  />
          </el-table>



          <div class="fy_div" style="margin-left: 400px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pan.length">
            </el-pagination>
          </div>
          <el-dialog
              v-model="dialogVisible"
              width="80%"
          >
            <div style="margin-top: -30px">—————————————————————<span style="color:red">采购入库</span>———————————————————————</div>
            <div style="margin-top: 10px">
              <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-row >

                  <el-col :span="10">
                    <el-form-item label="采购编号:">
                      <el-input v-model="ruleForm.procurementId" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>


                  <el-col :span="10">
                    <el-form-item label="供应商:" prop="procurementId">
                      <el-select v-model="ruleForm.supplierId" @change="findById(ruleForm.supplierId)">

                        <el-option
                            v-for="provider in providerOptions"
                            :key="provider.supplierId"
                            :label="provider.supplierName"
                            :value="provider.supplierId"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>




                </el-row>




                <el-table
                    :data="gridData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%;"
                    max-height="200"
                    @selection-change="selectionLineChangeHandle"
                    :cell-style="{'text-align':'center'}"
                    :header-cell-style="{background:'#D6E9FC',color:'#606266','text-align':'center'}">

                  <el-table-column width="50" type="selection"></el-table-column>
                  <el-table-column property="drugName" label="药品名" width="150"></el-table-column>
                  <el-table-column property="drugPrice" label="单价" width="200"></el-table-column>
                  <el-table-column property="drugDate" label="生产日期"></el-table-column>
                  <el-table-column property="" label="数量">

                    <template #default="scope" style="text-align: center">
                      <el-input-number style="width: 100px;text-align: center" v-model="scope.row.numbers" controls-position="right" @change="handleChange" :min="1" :max="20000"></el-input-number>
                    </template>

                  </el-table-column>
                  <el-table-column property="" label="参考价格">
                    <template #default="scope" style="text-align: center">
                      {{ scope.row.numbers==null?0 : scope.row.numbers*scope.row.drugPrice}}
                    </template>
                  </el-table-column>
                </el-table>

                <!--分页-->
                <div class="fy_div">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[5, 10, 20, 40]"
                      :page-size="pagesize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="gridData.length">
                  </el-pagination>
                </div>
              </el-form>



            </div>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="clearFrom()">取 消</el-button>
      <el-button type="primary" @click="insertProcurementDetails()">确 定</el-button>
    </span>
            </template>

          </el-dialog>
          <!-- 分页控件结束 -->
        </el-card>




      </el-tab-pane>
      <el-tab-pane label="已审核" name="second" style="margin-top: -40px">




        <el-card>

          <!-- 查询条件开始 -->
          <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
            <!--            <el-form-item label="供应商名称" prop="providerId" >-->
            <!--              <el-select-->
            <!--                  placeholder="请选择厂商"-->
            <!--                  v-model="queryParams.supplierId">-->

            <!--                <el-option-->
            <!--                    v-for="provider in providerOptions"-->
            <!--                    :key="provider.supplierId"-->
            <!--                    :label="provider.supplierName"-->
            <!--                    :value="provider.supplierId"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="申请人" prop="procurementName">-->
            <!--              <el-input v-model="queryParams.procurementName"></el-input>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="采购编号" prop="procurementId">-->
            <!--              <el-input v-model="queryParams.procurementId"></el-input>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item>-->
            <!--              <el-button type="primary" icon="el-icon-search" size="mini" @click="initDate">搜索</el-button>-->
            <!--              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
            <!--            </el-form-item>-->
          </el-form>
          <!-- 查询条件结束 -->


          <!-- 表格工具按钮结束 -->

          <!-- 数据表格开始 -->
          <el-table
              :data="pan2.slice((currentPage-1)*pagesize,currentPage*pagesize)">

            <el-table-column label="盘点编号" align="center" width="200" prop="checkId">

              <template #default="scope">
                <router-link :to="{path: '/panDetails',query:{key:scope.row.checkId,value:JSON.stringify(scope.row)}}">
                  {{scope.row.checkId}}
                </router-link>
              </template>
            </el-table-column>


            <el-table-column label="差异数量" prop="checkKnum"/>
            <el-table-column label="申请人" align="center" prop="checkUser"/>
            <el-table-column label="审批人" prop="userName"/>
            <el-table-column label="备注" prop="checkNote"/>
            <el-table-column label="创建时间" align="center" prop="checkDate"  />
            <el-table-column label="审批时间" prop="checkNowtime"/>
          </el-table>



          <div class="fy_div" style="margin-left: 400px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pan2.length">
            </el-pagination>
          </div>
          <!-- 分页控件结束 -->
        </el-card>




      </el-tab-pane>
    </el-tabs>




  </div>
</template>
<script>

import {ElMessage} from "element-plus";
import http, {service} from "@/http/request";
import Cookies from 'js-cookie';
export default {
  // 过滤器
  filters: {
    // 保留两位小数
    rounding(value) {
      return value.toFixed(2)
    }
  },
  name: "pandianshenpi",
  // 定义页面数据
  data() {
    return {
      activeName: 'first',
      currentPage:1, //初始页
      pagesize:10,   //    每页的数据
      pan:[],
      pan2:[],
      panDetails:[],

      ruleFrom:{
        checkState:'',
        userName:"",
      }

    }
  },

  methods:{
    handleClick(tab, event) {
      if (tab.index ==0){
        this.initDate3()

      }else {
       this.initDate4()
      }



    },
    selectionLineChangeHandle(val){
      this.panDetails=val;

      for(var i = 0; i< this.panDetails.length; i++){
        console.log(this.panDetails[i].checkId)
      }


    },


    updateById(checkState){
      for(var i = 0; i< this.panDetails.length; i++) {
        service.get("update-panState", {
          params: {
            checkState: checkState,
            checkId:this.panDetails[i].checkId,
            userName:this.ruleFrom.userName
          }
        })
            .then(v => {
              this.initDate3();
            })
      }
    },


    handleChange(value) {
      console.log(value);
    },


    initDate3(){
      service.get("find-pan")
          .then(s=>{
            this.pan=s.data;
          })
    },
    initDate4(){
      service.post("find-pan2",this.ruleFrom)
          .then(v=>{
            this.pan2=v.data;
          })
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    // 获取当前日期的方法
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = Year
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },

  },
  computed:{
    reversedMessage: function () {
      var result=0;
      for(let i=0;i<this.lyhProcurementDetailsEntities.length;i++) {
        result+= this.lyhProcurementDetailsEntities[i].drugPrice
      }
      return result;
    }
  },

  created() {
    this.initDate3()

    this.ruleFrom.userName=Cookies.get('username');
    service.get("find-supplierName")
        .then((v) => {
          this.providerOptions = v.data;
        })
  },
}

</script>

<style scoped>
/*.putInStorage{*/
/*  max-width:800px*/
/*}*/
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

.el-card{
  margin-top: 50px;

}
.block{
  margin-left: 350px;
}
.fy_div{
  margin-top:20px;
  margin-left: -200px;
}
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: none;
  text-decoration: none;
}
</style>
